<template>
  <div>
    <h1 class="title">选择源数据库和目标数据库</h1>
    <el-form ref="form" :model="data" :rules="rules">
      <el-row :gutter="20">
        <template v-for="item in formElData">
          <el-col :key="item.dataName" :span="item.span">
            <formItemVue :data="item" :form="data" />
          </el-col>
          <el-col v-if="item.dataName == 'sourceId'">
            <p class="tips">
              这是您数据的来源。要从中迁移的数据库.
              <span
                class="per-view"
                @click="perViewInfo('sourceId')"
              >测试连接</span>
            </p>
          </el-col>
          <el-col v-if="item.dataName == 'sinkId'">
            <p class="tips">
              这是您数据的目的地。要迁移到的数据库.<span
                class="per-view"
                @click="perViewInfo('sinkId')"
              >测试连接</span>
            </p>
          </el-col>
        </template>
      </el-row>
    </el-form>

    <el-dialog
      v-if="perViewDataSourceInfo"
      title="数据源信息"
      :visible.sync="perViewDataSourceInfo"
    >
      <databaseView :form="databaseInfoTypeValue" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="testConnect">测试连接</el-button>
        <el-button
          type="primary"
          style="margin-left: 10px"
          @click="perViewDataSourceInfo = false"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import formItemVue from '@/components/FormItem/index.vue'
import databaseView from '../../taskReports/migrationReport/components/databaseView.vue'
import { stepTwoData } from './index'
import Vue from 'vue'

import { databaseCheck } from '@/api/console/datasourceInfo'

export default {
  // eslint-disable-next-line vue/require-prop-types
  dicts: ['database_datatype'],
  components: { formItemVue, databaseView },

  props: ['data'],
  data: function() {
    return {
      rules: {},
      dataSourceList: {},
      formElData: [],
      perViewDataSourceInfo: false,
      databaseInfoTypeValue: {}
    }
  },
  created() {
    this.formElData = stepTwoData
    this.getRules()
  },
  mounted() {},
  methods: {
    async perViewInfo(type) {
      if (this.$props.data[type].length < 1) {
        return this.$message.warning('请先选择实例')
      }
      this.perViewDataSourceInfo = true
      let item = await this.formElData
        .find((f) => f.dataName === type)
        .option(null, this.$props.data)
      item = item.find((f) => f.id === this.$props.data[type])
      this.databaseInfoTypeValue = item
    },
    async testConnect() {
      const res = await databaseCheck(this.databaseInfoTypeValue)
      if (res.data.code === 200) {
        this.$message({
          message: '连接成功',
          type: 'success'
        })
        this.form.testStatus = 0
      } else {
        this.form.testStatus = 1
        this.$message.error('连接失败')
      }
    },
    getRules() {
      const that = this
      if (!this.formElData) {
        return
      }
      this.formElData.forEach((f) => {
        if (!that.$props.data[f.dataName]) {
          Vue.set(that.$props.data, f.dataName, f.defaultValue || '')
        }
        this.rules[f.dataName] = f.rules
          ? f.rules
          : [
            {
              required: true,
              message: `请输入${f.label}`,
              trigger: 'change'
            }
          ]
      })
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-form-item__label {
  font-family: alimama, webfont-notdef;
  color: #333;
  text-align: left;
}

.title {
  color: #333;
  font-size: 22px;
  line-height: 1.25;
  font-family: alimama, webfont-notdef;
  font-size: 18px;
  box-sizing: border-box;
  font-weight: 600;
  margin: 25px 0;
  text-align: left;
}

.progress {
  p {
    color: #333;
    font-size: 14px;
    margin: 5px 0;
    font-weight: 600;
  }
}

.tips {
  font-size: 14px;

  .per-view {
    color: #1900ff;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    letter-spacing: 1px;
  }
}
</style>
